import React, { Component, PropTypes } from 'react';

import '../BodyDataInput.scss';
import LayoutView, { LayoutMode } from '../../layout';
import { Scroll, SelectItemList, SelectItem } from '../../common-ui-parts';
import { BodyItemConstant as BiC } from '../../../constants/InputItemConstants';
import { BodyDataInputContextConstant } from '../../../constants/ComponentContextConstants';
import { MultipleValidationCategory as MvC } from '../../../validations/BodyDataInputValidation';

// 質問に関するイラスト
import imgQ12 from './images/imgQ12.png';

/**
 * Q12.コレステロール（LDL, 中性脂肪）
 */
class Question12 extends Component {
  getChildContext() {
    const { [BiC.HDL_CHOLESTEROL]: hdl, [BiC.LDL_CHOLESTEROL]: ldl, [BiC.TRIGLYCERIDE]: triglyceride} = this.context.parent.inputData;
    return Object.freeze({
      parent: Object.freeze(Object.assign({}, this.context.parent, {
        // [次へ]ボタン無効条件：
        //   ・すべて未入力の場合
        //   ・LDLコレステロール or 中性脂肪＝未入力の場合
        disabledNext: ([hdl, ldl, triglyceride].every(input => input === undefined || input === '')) ||
        ([hdl, ldl, triglyceride].some(input => input === undefined || input === '')),
      })),
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.context.parent.pageIndex === nextProps.index;
  }

  scrollPageTop() {
    this.refs.layoutView.getWrappedInstance().scrollTop();
  }

  validatePage() {
    // 入力チェック（true:チェックOK）
    return this.context.parent.validateQuestionPage([BiC.LDL_CHOLESTEROL, BiC.TRIGLYCERIDE], [MvC.CHOLESTEROL]);
  }

  render() {
    const { inputData, errorInfo, updateState } = this.context.parent;
    return (
      <LayoutView
        ref="layoutView"
        mode={LayoutMode.QUESTION}
        title="コレステロール"
        question={{
          no: 12,
          sentence: <p>血液検査の結果を入力してください。<br /><span className="reference" >（値が不明な場合：【？】ボタン参照）</span><br/><br/></p>,
          illustSrc: imgQ12,
          illustHeight: 208,
          helpText:
            <Scroll name="reference-of-abnormal">
              <div className="referenceContent">
                <p>脂質異常症の診断基準</p>
                <blockquate>
                  <p>ご自分の血清脂質の検査値がこのいずれかだと脂質異常症です。</p>
                  <ul type="circle">
                    <li><span>LDLコレステロール<br/>（悪玉コレステロール）</span><br/><span>　⇒ 140mg/dl以上</span></li>
                    <li><span>中性脂肪<br/>（トリグリセライド）</span><br/><span>　⇒ 150mg/dl以上</span></li>
                  </ul>
                  <p>参考文献：<br/><cite>日本動脈硬化学会 動脈硬化性疾患予防ガイドライン2012年版</cite></p>
                </blockquate>
              </div>
            </Scroll>,
        }}
        errorText={errorInfo.get(BiC.LDL_CHOLESTEROL, BiC.TRIGLYCERIDE, MvC.CHOLESTEROL)}
        className="ldl-cholesterol"
      >
       {/* HDLコレステロール */}
        <dl className="content">
          <dt className="cholesterol">{BiC.HDL_CHOLESTEROL.label}</dt>
          <dd>
            <SelectItemList className="narrow-list"
              name={BiC.HDL_CHOLESTEROL}
              value={inputData[BiC.HDL_CHOLESTEROL]}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.HDL_CHOLESTEROL.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
          </dd>
        </dl>
        {/* LDLコレステロール */}
        <dl className="content">
          <dt className="cholesterol">{BiC.LDL_CHOLESTEROL.label}</dt>
          <dd>
            <SelectItemList className="narrow-list"
              name={BiC.LDL_CHOLESTEROL}
              value={inputData[BiC.LDL_CHOLESTEROL]}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.LDL_CHOLESTEROL.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
          </dd>
        </dl>

        {/* 中性脂肪 */}
        <dl className="content">
          <dt className="cholesterol">{BiC.TRIGLYCERIDE.label}</dt>
          <dd>
            <SelectItemList className="narrow-list"
              name={BiC.TRIGLYCERIDE}
              value={inputData[BiC.TRIGLYCERIDE]}
              placeholder="選択してください"
              propagate={updateState}
            >
              {BiC.TRIGLYCERIDE.choices.map((choice, index) => (
                <SelectItem key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectItemList>
          </dd>
        </dl>
      </LayoutView>
    );
  }

}

Question12.contextTypes = BodyDataInputContextConstant;
Question12.childContextTypes = Question12.contextTypes;

/*Question12.propTypes = {
  index: PropTypes.number,    // 自ページINDEX（0～）
};*/

export default Question12
